<template>
  <div class="subPage" >
    <div class="topBox">
      <div class="msgBox">
        <div class="docLeft">
          <img :src="doctorInfo.doctor_image_url">
        </div>
        <div class="docRight">
          <div :title="doctorInfo.doctor_name">{{doctorInfo.doctor_name}}</div>
          <div :title="doctorInfo.positional_title+'/'+doctorInfo.dept_name">{{doctorInfo.positional_title}}&nbsp;/&nbsp;{{doctorInfo.dept_name}}</div>
        </div>
      </div>
      <div class="scoreBox">
        <span>服务态度:{{!doctorInfo.a_start ? '暂无' : doctorInfo.a_start}}</span>
        <span>诊疗技术:{{!doctorInfo.b_start  ? '暂无' : doctorInfo.b_start}}</span>
        <span>主观疗效:{{!doctorInfo.c_start   ? '暂无' : doctorInfo.c_start}}</span>
      </div>
    </div>
    <div class="bomBox">
      <div class="introduce txt1">
        <span class="labelClass">专长</span>&nbsp;&nbsp;
          {{doctorInfo.skilled_in}}
      </div>
      <div class="introduce txt2">
        <span class="labelClass">简介</span>&nbsp;&nbsp;
          {{doctorInfo.doctor_info}}
      </div>
    </div>
    <div class="centerBox">
      <button class="btnLeft" open-type="getUserInfo" plain="true" @click.stop @getuserinfo="toDetails($event,1)">
        <img :src="imgText" >
        <div class="itemTxt">
          <p class="topP">图文问诊</p>
          <p class="bomP"> ￥{{!doctorInfo.image_text_price ? 0 : doctorInfo.image_text_price}}</p>
        </div>
      </button>
      <div class="btnCenter"></div>
      <button class="btnRight" open-type="getUserInfo" plain="true" @click.stop @getuserinfo="toDetails($event,2)">
        <img :src="audioFrequencyIcon">
        <div class="itemTxt">
          <p  class="topP">音频问诊</p>
          <p class="bomP"> ￥{{!doctorInfo.video_price ? 0 : doctorInfo.video_price}}</p>
        </div>
      </button>
    </div>
    <div class="modalClass" :style="{ display: modalStyle }">
      <div class="modalBox">
        <!-- <img
          class="dialog_close"
          src="/static/images/dialog_close.png"
          v-if="applyStatus"
          @click="modalStyle = 'none'"
          alt=""
        /> -->
        <div class="modalTit">
          <!-- <img :src="descBgUrl" /> -->
          <img :src="bookingInformationList.banner" alt="" />
        </div>
        <div class="modalCenter">
          <div class="dataBox">
            <span class="itemSpan">{{ bookingInformationList.title }}</span>
          </div>
          <div
            class="dataBox"
            v-for="(item, index) in bookingInformationList.detail"
            :key="index"
          >
            <!-- <span class="itemPie"></span> -->
            <span
              :class="[
                'itemSpan',
                index == 1 ? 'itemColor' : '',
              ]"
              >{{ item }}
              </span
            >
          </div>
        </div>
        <!-- <div :class="[modalFooter, 'dialog-footer']" @click="close">
          {{ btnTime }}{{ btnName }}
        </div> -->
        <div class="btnBomBlue">
            <div class="modalFooterBtn leftBtn" @click="returnPage">
              不同意
            </div>
            <div class="modalFooterBtn rightBtn" @click="agree">
              同意
            </div>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
//   import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  import storage from '@/utils/storage'
  import api from '@/api/api'
//   import Bus from '@/utils/bus.js'
//   const { $Toast, $Message } = require('../../../../../static/iview/base/index')
//   import visitingTips from '@/components/visitingTips.vue'
  export default {
    components: {
    //   visitingTips
    },
    data () {
      return {
        doctor_id: '',
        doctorInfo: {},
        imgText: '',
        imgUrl: '',
        audioFrequencyIcon: '',
        bookingInformationList: {
          banner: "https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/patient/tuwen_yinpin_banner.png",
          title:
            "线上问诊功能包含图文问诊和音频问诊，您可以通过图文或音频的方式与医生进行咨询交流，为确保您的就医体验，请仔细阅读以下须知：",
          detail: [
            "1. 就诊人为诊断明确且病情稳定的复诊患者，请确认就诊患者信息，并如实反馈病情，否则一切后果将由就诊人承担；",
            "2.请在病情描述界面上传您的既往病历、处方笺、检验、检查结果等相关资料；",
            "3.复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；",
            "4.挂号时间为：挂号时间为24小时制；",
            "5.医生将在24小时内接诊并回复,自医生接诊开始计时。交流时限为24小时,超时系统将自动结束对话。如医生未在24小时内接诊,挂号费自动原路退还。",
          ]
        },
      modalStyle: "none"
      }
    },
    computed: {
      
    },
    onLoad (options) {
    if(options.canShowModal) {
      this.modalStyle = "flex"
    }
    },
    onUnload () {
      this.doctorInfo = {}
      this.modalStyle = "none"
    },
    mounted () {

    },
    methods: {
      getDoctorDetails() {
        this.$api.doctorDetails({doctor_id: this.doctor_id}, ({'showLoading': true})).then(res => {
          // console.log(res)
          this.doctorInfo = res.data[0]
        })
      },
      // 用户是否登入判断
      judgeUserInfo(e,value) {
        if (e.mp.detail.rawData) {
        //用户按了允许授权按钮
        console.log("用户按了允许授权按钮");
        //判断是否登陆(是否有患者token)
        var token = this.$storage.getToken();
        if (token) {
          //判断是否认证
          var that = this;
          that.$api
            .get_user_info("", { showLoading: true })
            .then(function (data) {
              let accountInfo = data.data[0];
              accountInfo.headImg = data.data[0].head_portrait
                ? data.data[0].head_portrait
                : "";
              that.$storage.setAccountInfo(accountInfo);
              if (accountInfo.netease_token) {
                nim.login(accountInfo);
              }
              if (data.data[0].isreal == 0) {
                // '未认证' 去认证
                that.$router.push("/pages/qualification/main");
              } else if (data.data[0].isreal == 1) {
                // '已认证' 去挂号
                that.$router.push(`/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(that.doctorInfo)}&key=${value}`)
              }
            });
          } else {
            //跳转登录页
            // console.log('用户未登录')
            let that = this;
            mpvue.login({
              success(res) {
                if (res.code) {
                  that.$api.wechatLogin({ code: res.code }).then((data) => {
                    that.openid = data.data.openid;
                    that.key = data.data.session_key;
                    if (data.data.token) {
                      that.$storage.setToken(data.data.token);
                    } else {
                      that.$router.push("/pages/center/child/login/main");
                    }
                  });
                } else {
                  this.$router.push("/pages/center/child/login/main");
                }
              },
            });
          }
        } else {
          //用户按了拒绝按钮
          console.log("用户按了拒绝按钮");
        }
      },
      toDetails (e,value) {
        this.judgeUserInfo(e,value)
        // this.$router.push(`/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(this.doctorInfo)}&key=${value}`)
      },
      // 弹框返回
      returnPage () {
        let WxPages = getCurrentPages();
        if (WxPages.length<2) {
          this.$router.replace('/pages/index/main')
        } else {
          this.$router.go(-1)
        }
      },
      // 弹框同意
      agree () {
        this.modalStyle = "none";
      },
    },
    onShow () {
      // this.getWechatList()
      let that = this
      // console.log(that.$route.query.name)
      that.imgUrl = api.imgUrl
      that.imgText = that.imgUrl + 'ImgText.png'
      that.audioFrequencyIcon = that.imgUrl + 'audioFrequencyIcon.png'
      mpvue.setNavigationBarTitle({
        title: that.$route.query.name+'医生' || '医生详情',
      })
      this.doctor_id = this.$route.query.id
      this.getDoctorDetails()
    },
    watch: {
      sessionsList: function(oldValue, newValue) {
        // this.dealData()
      }
    }
  }
</script>

<style scoped lang='less'>
  .subPage {
    display: flex;
    flex-direction: column;
    background: #F9F9F9;
  }
  .topBox{
    padding: 30rpx 38rpx;
    height:269rpx;
    background:rgba(74,100,234,1);
  }
  .msgBox{
    height: 130rpx;
    margin-bottom:38rpx;
    .docLeft{
      width: 130rpx;
      height: 130rpx;
      // background:rgba(2,68,160,1);
      border-radius:70rpx;
      display: inline-block;
      // opacity:0.03;
      img{
        width: 100%;
        height: 100%;
        border-radius:70rpx;
      }
    }
    .docRight{
      display: inline-block;
      vertical-align: top;
      margin-left:12rpx;
    }
    .docRight>div:nth-child(1){
      font-size:44rpx;
      font-weight:600;
      color:rgba(255,255,255,1);
      margin-bottom:10rpx;
      margin-top:10rpx;
      overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .docRight>div:nth-child(2){
      font-size:30rpx;
      font-weight:400;
      color:rgba(255,255,255,1);
      overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
  }
  .scoreBox{
    padding-left: 10rpx;
    display: flex;
    justify-content:space-between;
    span{
      display: inline-block;
      font-size:28rpx;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }
  .bomBox{
    padding-left:40rpx;
    padding-right:40rpx;
    padding-top:103rpx;
    .introduce{
      word-break: break-all;
      margin-bottom:30rpx;
      // height:250rpx;
      font-size:30rpx;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height: 52rpx;
    }
    .txt1{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      overflow: hidden;

    }
    .txt2{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 9;
      overflow: hidden;
    }
    .labelClass{
      text-align: center;
      display: inline-block;
      width:103rpx;
      height:46rpx;
      line-height: 46rpx;
      background:rgba(74,100,234,0.1);
      border-radius:23rpx;
      border:1rpx solid rgba(74,100,234,1);
      font-size:28rpx;
      font-weight:400;
      color:rgba(74,100,234,1);
    }
  }
  .centerBox{
    position: absolute;
    width:563rpx;
    height:98rpx;
    background:rgba(255,255,255,1);
    box-shadow:0rpx 3rpx 11rpx 3rpx rgba(25,46,153,0.16);
    border-radius:8rpx;
    left:37rpx;
    top:261rpx;
    display: flex;
    padding:21rpx 57rpx;
    justify-content:space-between;
    img{
          display: inline-block;
          width: 103rpx;
          height: 103rpx;
          margin-right: 5rpx;
          vertical-align: bottom;
        }
    .btnLeft{
      display: inline-block;
      width: 45%;
      position: relative;
      background-color: #fff;
      border: 0;
      img {
        float: left;
      }
    }
    .btnCenter{
      border-left: 1rpx solid #CCCCCC;
      width:2rpx;
      height:58rpx;
      padding-top: 10rpx;
      margin-top: 16rpx;

    }
    .btnRight{
      display: inline-block;
      position: relative;
      background-color: #fff;
      border: 0;
      img {
        float: left;
      }
    }
    .itemTxt{
      display: inline-block;
      vertical-align: top;
      p {
        height: 42rpx;
        text-align: left;
        font-size: 26rpx;
      }
    }
    .topP{
      color:rgba(51,51,51,1);
      font-weight:400;
    }
    .bomP{
      font-weight:400;
      color:rgba(102,102,102,1);
    }
  }
  .modalClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    position: relative;
    // width: 670rpx;
    height: 920rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    margin: 0 65rpx;
    .dialog_close {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: -30rpx;
      right: -30rpx;
    }
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .modalCenter {
      padding: 27rpx 35rpx 13rpx 35rpx;
      display: flex;
      flex-direction: column;
      height: 55%;
      overflow-y: scroll;
      &::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0);
        border-left: 1px solid rgba(0, 0, 0, 0);
      }
      &::-webkit-scrollbar {
        width: 8rpx;
        height: 13rpx;
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #bbbbbb;
        background-clip: padding-box;
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
        min-height: 28px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
      }
      .dataBox {
        margin-bottom: 20rpx;
        span {
          display: inline-block;
          font-size: 30rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: top;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 13rpx;
          // vertical-align: middle;
          // margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 100%;
        }
        .itemColor {
          color: #fb4141;
        }
        .itemSpan2 {
          font-weight: bold;
        }
      }
    }
    .btnBomBlue{
      display: flex;
      justify-content: space-between;
      padding: 32rpx 37rpx;
      .modalFooterBtn{
        // flex: 1;
        // line-height: 76rpx;
        text-align: center;
        font-size:36rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        // width: 257rpx;
        padding: 17rpx 0rpx;
        // margin-bottom: 40rpx;
        width: 257rpx;
        border-radius:4rpx;
      }
      .leftBtn{
        color: #4A71E8;
        background:rgba(255,255,255,1);
        border: 1rpx solid rgba(160,183,237,1);
      }
      .rightBtn{
        color:#FFFFFF;
        background:linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%);
      }
    }
    .modalFooter {
      position: relative;
      top: 40rpx;
      // width:544rpx;
      height: 76rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 76rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
</style>
